layui.use(['form', 'table'], function () {
    let $ = layui.jquery,
        form = layui.form,
        table = layui.treeTable;

    table.render({
        elem: '#tbl',
        url: ctx + '/api/categories',
        toolbar: '#toolbar',
        cols: [[
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: '编号', sort: true},
            {field: 'name', width: 200, title: '类别名称', sort: true},
            {field: 'parentId', width: 100, title: '父类别编号'},
            {field: 'parentName', width: 150, title: '父类别名称'},
            {field: 'iconDesc', width: 200, title: '类别图标样式'},
            {field: 'seq', width: 200, title: '顺序号'},
            {field: 'gmtCreate', width: 200, title: '创建时间'},
            {field: 'gmtUpdate', width: 200, title: '最后修改时间'},
            {field: 'description', width: 280, title: '备注'},
            {title: '操作', minWidth: 200, toolbar: '#row-toolbar', align: "center"}
        ]]
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(tbl)', function (obj) {
        if (obj.event === 'reload'){
            table.reload('tbl')
        }else if (obj.event === 'add') {  // 监听添加操作
            layer.open({
                title: '添加商品类别',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['800px', '500px'],
                content: ctx + '/category/add',
            });
        } else if (obj.event === 'delete') {  // 监听批量删除操作
            let checkStatus = table.checkStatus('tbl')
                , data = checkStatus.data;
            let ids = [];
            data.forEach(t => ids.push(t.id));
            if (ids.length === 0) {
                layer.msg("请选中您要删除的记录")
            } else {
                layer.confirm("是否确认删除选中的记录", function (index) {
                    deleteByIds(ids);
                    table.reload("tbl");
                    layer.close(index);
                })
            }
        }
    });

    //监听表格复选框选择
    table.on('checkbox(tbl)', function (obj) {
        console.log(obj)
    });
    //监听表格行工具栏
    table.on('tool(tbl)', function (obj) {
        let data = obj.data;
        if (obj.event === 'add') {
            layer.open({
                title: '添加商品类别',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['800px', '500px'],
                content: ctx + '/category/add?id=' + data.id,
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '修改商品类别',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['800px', '500px'],
                content: ctx + '/category/edit?id=' + data.id,
            });
            return false;
        } else if (obj.event === 'delete') {
            layer.confirm('是否确认删除', function (index) {
                let ids = [obj.data.id];
                deleteByIds(ids)
                table.reload("tbl");
                layer.close(index);
            });
        }
    });

    function deleteByIds(ids) {
        let url = ctx + "/api/categories"
        $.ajax({
            url,
            method: "delete",
            dataType: "json",
            data: {
                ids
            },
            traditional: true,
            success(resp) {
                if (resp.success) {
                    layer.msg("成功删除" + resp.rows + "条数据");
                    table.reload("tbl");
                } else {
                    layer.alert(resp.error||"删除失败!该类别下有子类别或有商品属于此类别");
                }
            }
        });
    }

});